import React from "react"

// 定义参数（来自父组件）
type Props = {
    name: string,
    age?: number,
    isMine?: boolean
}
// 定义状态（自己的）
type State = {
    myName: string,
    myAge: number,
    mine: boolean
}

class Black extends React.Component<Props, State> {
    // 配置默认参数
    static defaultProps: Partial<Props> = {
        name: 'black',
        age: 8,
        isMine: false
    }
    // 配置状态
    state: State = {
        myName: 'BLACK',
        myAge: 25,
        mine: true
    }
    // 配置状态处理方法
    onAddAge = () => {
        this.setState({
            myAge: this.state.myAge + 1
        })
    }
    // 写页面
    render(): React.ReactNode {
        // 获取父组件的参数
        const {name, age, isMine} = this.props
        // 获取自己组件的参数
        const {myName, myAge, mine} = this.state
        return (
            <div>
                <div>
                    这是父组件来的props: {name} - {age} - {isMine ? 'Yes' : 'No'}
                </div>
                <div>
                    这是本组件来的state: {myName} - {myAge} - {mine ? 'Yes' : 'No'}
                </div>
                <button onClick={this.onAddAge}>+1</button>
            </div>
            
        ) 
    }
    
}
export {
    Black
}